<!-- view: give the base html-structure -->

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>{{ title }}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" type="text/css" href="view/stylesheets/styles.css" />
	<!-- <link rel="stylesheet" type="text/css" href="view/stylesheets/formlist.css" />  -->
	<link rel="SHORTCUT ICON" href="view/images/favicon.ico" />
</head>

<body>
	<!-- base items: shows current user and the login/logout link -->
	<div id="head">
		<table width="100%" border="0">
			<tr>
				<td height="15" width="300">
					<p>{% block user %}<font color="#954b4b"><b>{{ userText }}</b></font>{{ user }}{% endblock %}</p>
				</td>
				<td align="right" width="300">
					<!-- login/logout -->
					<a href="{% block url %}{{ url }}{% endblock %}">{% block urlText %}{{ urlText }}{% endblock %}</a>
				</td>
			</tr>
		</table>
		<hr	style="color: lightgrey; background: lightgrey; height: 1px; width: 100%;" />
	</div>

	<!-- also base items: shows the octopus-logo, the available languages and hints/warrnings/errors -->
	<div id="banner">
		<table width="100%" border="0">
			<tr>
				<td height="15" width="100">
					<img width="125" height="81" src="view/images/Logo.png"	alt="octopusLogo" />
				</td>
				<td align="center">
					<font color="{% block hintColor %}{{ hintColor }}{% endblock %}">&nbsp;{% block hintText %}{{ hintText }}{% endblock %} &nbsp;</font>
				</td>
				<td align="right" width="100">
					<!-- 
					<select name="language" size="1">
						<option selected="selected">EN - English</option>
						<option>DE - German</option>
					</select>
					-->
					<a href="/language?language=DE" title="german"><img width="40" height="40" src="view/images/german.png" alt="DE" /></a> 
					<a href="/language?language=EN" title="english"><img width="40" height="40"	src="view/images/english.png" alt="EN" /></a>
				</td>
			</tr>
		</table>
		<hr	style="color: lightgrey; background: lightgrey; height: 1px; width: 100%;" />
	</div>

	<!-- base items: shows the menu-items - change only when the language is switched -->
	<div id="menu">
		<!-- if you want to chance the url where the 'your data' menu-link should direct, do it here in the 'href' -->
		<a href="/regions" title="{{ credentials }}">{{ credentials }}</a> | 
		<!-- <a href="/selectdata" title="{{ yourData }}">{{ yourData }}</a> | --> 
		<a href="/chooseraidlevel" title="{{ yourData }}">{{ yourData }}</a> |
		<a href="/" title="{{ info }}">{{ info }}</a>
		<hr style="color: lightgrey; background: lightgrey; height: 1px; width: 100%;" />
	</div>

	<!-- content-area: this area will be changed by each interaction with the user. it will be presented the necessary elements -->
	<div id="content">{% block content %} {{ content }} {% endblock	%}</div>
</body>
</html>